<template>
  <div class="user-tools">
    <van-cell title="我的下级" is-link to="subordinate">
      <template slot="title">
        <div style="display: flex;">
          <img src="@/assets/my/my1.png" alt="logo" style="width: 24px;height: 24px;left: 6px;padding-top:4px">
          <div style="margin-left: 20px;font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #000000;">
            我的下级</div>
        </div>
      </template>
    </van-cell>
    <van-cell title="邀请好友" is-link to="poster">
      <template slot="title">
        <div style="display: flex;">


          <img src="@/assets/my/my2.png" alt="logo" style="width: 24px;height: 24px;left: 6px;padding-top:4px">
          <div style="margin-left: 20px;font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #000000;">
            邀请好友</div>
        </div>
      </template>
    </van-cell>
    <van-cell title="收货地址" is-link to="address">
      <template slot="title">
        <div style="display: flex;">


          <img src="@/assets/my/my3.png" alt="logo" style="width: 24px;height: 24px;left: 6px;padding-top:4px">
          <div style="margin-left: 20px;font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #000000;">
            收货地址</div>
        </div>
      </template>
    </van-cell>
    <van-cell title="隐私政策" is-link to="Privacy">
      <template slot="title">
        <div style="display: flex;">


          <img src="@/assets/my/my4.png" alt="logo" style="width: 24px;height: 24px;left: 6px;padding-top:4px">
          <div style="margin-left: 20px;font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #000000;">
            隐私政策</div>
        </div>
      </template>
    </van-cell>
    <van-cell title="用户协议" is-link to="xieyi">
      <template slot="title">
        <div style="display: flex;">

          <img src="@/assets/my/my5.png" alt="logo" style="width: 24px;height: 24px;left: 6px;padding-top:4px">
          <div style="margin-left: 20px;font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #000000;">
            用户协议</div>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.dispatch('user/logout')
        .then(() => {
          this.$notify({
            type: 'success',
            message: '退出成功',
            duration: 2000,
            onOpened: () => {
              this.$router.push({ name: 'Login' })
            }
          })
        })
    }
  }
}
</script>

<style>
:root {
  --user-tools-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
}
</style>

<style lang="scss" scoped>
.user-tools {
  width: 702px;
  background: rgba(255, 255, 255, 1);
  margin: 0 auto;
  margin-top: 24px;
  box-shadow: var(--user-tools-shadow); // 这里使用 css 函数，是为了避免旧版本 vue-cli 依赖的 css 压缩工具（mini-css-extract-plugin）导致的 bug
  border-radius: 24px;
  overflow: hidden;
}

.user-tools .van-cell {
  line-height: 8.4vw !important;
}
</style>
